<template>
  <div>
    <div class="home">
      <span class="cl-666">列表页定位：</span>{{this.city}}</div>
    <div class="list-box">
      <ul>
        <li v-for="(item,index) of list" :key="index" @click="changeCity(item)">{{item}}</li>
      </ul>
    </div>
    <div>{{this.dualcity}}</div>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapActions,
    mapGetters
  } from 'vuex'
  export default {
    name: 'List',
    data() {
      return {
        list: ['武汉', '上海', '北京', '深圳', '杭州', '成都']
      }
    },
    computed: {
      ...mapState(['city']),
      ...mapGetters(['city','dualcity'])
    },
    methods: {
      changeCity(item) {
        // 异步操作
        this.$store.dispatch('clickCity', item);
        // 同步操作
        // this.$store.commit('changeCitys', item);
        // 简化异步
        // this.clickCity(item)
        // 简化同步
        // this.changeCitys(item)
        // this.$router.push('/')
      },
      ...mapMutations(['changeCitys']),
      ...mapActions(['clickCity'])
    }
  }

</script>
